<template>
	<div class="app-container">
		<div class="wx-user-box">
			<!-- 查询 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="门店名称">
					<el-input v-model="formInline.shop_name" clearable placeholder="请输入门店名称" style="width: 240px;"
						@change="onSubmit"></el-input>
				</el-form-item>
				<el-form-item label="门店状态">
					<el-select v-model="formInline.state" placeholder="请选择" style="width: 240px;" clearable
						@change="onSubmit">
						<el-option label="正常" value="1" />
						<el-option label="关闭" value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间">
					<el-date-picker style="width: 400px;" v-model="formInline.createtime" type="datetimerange"
						value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']" @change="onSubmit">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addShop">添加门店</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
				<el-table-column label="关联小区" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.xq_names}}
					</template>
				</el-table-column>
				<el-table-column prop="shop_name" label="门店名称"></el-table-column>
				<el-table-column label="门店图片">
					<template slot-scope="scope">
						<el-image v-if="scope.row.logo_img" style="width: 60px; height: 60px;display:block;"
							:src="scope.row.logo_img + '?imageView2/1/w/100/h/100'"
							:preview-src-list="[scope.row.logo_img]">
						</el-image>
					</template>
				</el-table-column>
				<!-- <el-table-column label="门店资质">
					<template slot-scope="scope">
						<el-image
							v-if="scope.row.cualification_img"
						    style="width: 60px; height: 60px;display:block;"
						    :src="scope.row.cualification_img + '?imageView2/1/w/100/h/100'"
							:preview-src-list="[scope.row.cualification_img]">
						</el-image>
					</template>
				</el-table-column> -->
				<el-table-column prop="address" label="门店地址"></el-table-column>
				<el-table-column prop="shop_mobile" label="门店电话"></el-table-column>
				<el-table-column label="起送价">
					<template slot-scope="scope">
						{{scope.row.starting_price}}元
					</template>
				</el-table-column>
				<el-table-column prop="boss_name" label="老板姓名"></el-table-column>
				<el-table-column prop="boss_phone" label="老板电话"></el-table-column>
				<el-table-column label="销售类型">
					<template slot-scope="scope">
						{{sale_type[scope.row.sale_type]}}
					</template>
				</el-table-column>
				<el-table-column label="配送方式">
					<template slot-scope="scope">
						{{delivery[scope.row.delivery_method]}}
					</template>
				</el-table-column>
				<el-table-column label="结算模式">
					<template slot-scope="scope">
						{{settlement_mode[scope.row.settlement_mode]}}
					</template>
				</el-table-column>
				<el-table-column label="评论状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.comment_switch === 1" effect="dark">开启</el-tag>
						<el-tag v-if="scope.row.comment_switch === 2" effect="dark">关闭</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="门店状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state === 1" effect="dark">正常</el-tag>
						<el-tag v-if="scope.row.state === 2" effect="dark">关闭</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" />
				<el-table-column fixed="right" label="操作" width="160">
					<template slot-scope="scope">
						<el-button size="mini" plain type="primary" @click="edit(scope.row)">编辑</el-button>
						<el-button size="mini" plain type="danger" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount"
					prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
			
			<shop-detail v-if="centerDialogVisible1" :datas="itemForm"></shop-detail>
		</div>
	</div>
</template>

<script>
	import Api from '@/api/pages/mall/index'
	import shopDetail from './components/detail.vue'
	export default {
		name: 'shopList',
		components:{
			shopDetail
		},
		data() {
			return {
				centerDialogVisible1: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
				currentPage: 1, // 当前页码
				total: 0, // 总条数
				formInline: {
					shop_name: '',
					state: '',
					createtime: ''
				},
				list: [],
				sale_type: {
					1: '到店服务',
					2: '到家服务',
				},
				delivery:{
					1: '快递',
					2: '自配送',
					3: '自提',
					4: '无需配送',
				},
				settlement_mode: {
					1: '扣点模式',
					2: '供货模式',
				},
				itemForm: {}
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			// 每页显示的条数
			handleSizeChange(val) {
				this.pageSize = val
				this.getData()
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},

			// 显示第几页
			handleCurrentChange(val) {
				this.currentPage = val
				// 切换页码时，要获取每页显示的条数
				this.getData()
			},
			
			colShop(data){
				this.centerDialogVisible1 = false;
				if(data){
					this.getData()
				}
			},

			onSubmit() {
				this.currentPage = 1
				this.getData()
			},

			getData() {
				const data = {
					pageNumber: this.currentPage,
					pageSize: this.pageSize,
				}
				if (this.formInline.shop_name) {
					data['shop_name'] = this.formInline.shop_name
				}
				if (this.formInline.state) {
					data['state'] = this.formInline.state
				}
				if (this.formInline.createtime) {
					data['createtime'] = this.formInline.createtime[0] + '-' + this.formInline.createtime[1];
				}
				// console.log(data)

				Api.shopQuery(data).then(res => {
					if (res.state) {
						this.total = res.data.totalRow
						this.list = res.data.list
					}
				})
			},

			// 编辑
			edit(data) {
				this.centerDialogVisible1 = true;
				this.itemForm = data;
			},
			
			addShop(){
				this.itemForm = {};
				this.centerDialogVisible1 = true;
			},

			// 删除
			del(id) {
				this.$confirm('是否删除该门店?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.shopDelete({
						id: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: '删除成功！',
								type: 'success'
							});
							this.getData()
						} else {
							this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			},


		}
	}
</script>
<style lang="scss" scoped>
	.type-img {
		width: 60px;
		height: 60px;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>
